<template>
	<div class="app-container2">
		<el-form ref="form" :model="ruleForm" label-width="80px" size="small" :inline="true">
			<el-row>
				<el-form-item label="党组织">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item label="年份">
					<el-date-picker
						v-model="value1"
						type="year"
						placeholder="选择年"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="会议形式">
					<el-select v-model="value1" placeholder="请选择">
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="会议类型">
					<el-checkbox-group v-model="ruleForm.type">
						<el-checkbox label="党员大会" name="type"></el-checkbox>
						<el-checkbox
							label="支部委员会"
							name="type"
						></el-checkbox>
						<el-checkbox label="党小组会" name="type"></el-checkbox>
						<el-checkbox label="党课" name="type"></el-checkbox>
						<el-checkbox label="主题党日" name="type"></el-checkbox>
						<el-checkbox
							label="组织生活会"
							name="type"
						></el-checkbox>
						<el-checkbox
							label="民主生活会"
							name="type"
						></el-checkbox>
						<el-checkbox
							label="民主评议党员"
							name="type"
						></el-checkbox>
						<el-checkbox label="党委会" name="type"></el-checkbox>
						<el-checkbox
							label="中心组学习"
							name="type"
						></el-checkbox>
						<el-checkbox label="其他" name="type"></el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</el-row>
		</el-form>
		<div
			
			style="
				margin-bottom: 24px;
				display: flex;
				justify-content: space-between;
			"
		>
			<div  style="display: flex; align-items: center">
				<el-button
					type="danger"
					icon="el-icon-upload2"
					style="margin-right: 12px"
					>导出纪要</el-button
				>
				<el-button icon="el-icon-upload2" style="margin-right: 12px"
					>导出台账</el-button
				>
			</div>
			<div  style="display: flex; align-items: center">
				<el-button @click="submit">重置</el-button>
				<el-button type="danger">查询</el-button>
			</div>
		</div>
		<el-table :data="list" style="width: 100%" v-loading="loading">
			<el-table-column
				type="selection"
				width="55"
				align="center"
			></el-table-column>
			<el-table-column prop="date" label="发布组织" align="center">
			</el-table-column>
			<el-table-column prop="date" label="会议类型" align="center">
			</el-table-column>
			<el-table-column prop="date" label="会议形式" align="center">
			</el-table-column>
			<el-table-column prop="date" label="会议名称" align="center">
			</el-table-column>
			<el-table-column prop="date" label="开始时间" align="center">
			</el-table-column>
			<el-table-column prop="date" label="会议时长" align="center">
			</el-table-column>
			<el-table-column prop="date" label="主持人" align="center">
			</el-table-column>
			<el-table-column prop="date" label="主讲人" align="center">
			</el-table-column>
			<el-table-column prop="date" label="应参会人数" align="center">
			</el-table-column>
			<el-table-column prop="date" label="实到人数" align="center">
			</el-table-column>
			<el-table-column prop="date" label="议题" align="center">
			</el-table-column>
			<el-table-column label="操作" align="center" width="180">
				<template slot-scope="{ row }">
						<el-button type="text" @click="detail(row)">
							查看详情
						</el-button>
						<el-button type="text" @click="attendees(row)">查看笔记</el-button>
					
				</template>
			</el-table-column>
		</el-table>
    <pagination
      v-show="ruleForm.total>0"
      :total="ruleForm.total"
      :page.sync="ruleForm.pageNum"
      :limit.sync="ruleForm.pageSize"
      @pagination="getList"
    />
		<el-dialog title="提示" :visible.sync="detaildialog" width="1200px">
			<el-tabs v-model="detailtab">
				<el-tab-pane label="会议信息" name="会议信息">
					<el-form>
						<el-row>
							<el-col :span="12">
								<el-form-item label="会议名称：">
									张华楼村第一党支部季虹党小组测试会议签到
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="发布组织：">
									张华楼村第一党支部
								</el-form-item>
							</el-col>
						</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="开始时间：">
								2023-08-23 09:40:00 周三
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="会议时长：">
								30分钟
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="会议地点：">
								北京市海淀区甘家口街道车公庄西路辅路国兴家园
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="详细地址：">
								出现豆瓣举报v差价多少功夫i人回复i你觉得v胡日方工会会暴发
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="会议议题：">
								党员推优
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="会议类型：">
								支部委员会
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="会议形式：">
								线下会议
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="签到方式：">
								位置签到，二维码签到，手机签到
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="会议主讲人：">
								测试
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="会议主持人：">
								测试
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="会议内容：">
						第三个顺丰那边v就开始让家人韩国i润农家妇女u升任户部工部南瑞给你报价你就怒日光
					</el-form-item>
					<el-form-item label="列席人员：">
						第三个顺丰那边v就开始让家人韩国i润农家妇女u升任户部工部南瑞给你报价你就怒日光
					</el-form-item>
					<el-form-item label="会议附件：">
						<a href="http://www.baidu.com">百度</a>
					</el-form-item>
					<el-form-item label="会议记录：">
						<span v-html="`<h1>富文本内容</h1>`"></span>
					</el-form-item>
					<el-form-item label="会议视频：">
            <video src=""></video>
					</el-form-item>
					<el-form-item label="会议相册：">
            <img src=""></img>
					</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="参会信息" name="参会信息">
          <el-tag>
            <i class="el-icon-info" style="margin-right: 5px;color:#1890ff;font-size:16px"></i>
            参会回执：应参会15人，确认参会1人，已请假0人，待确认14人
          </el-tag>
          <el-table>
            <el-table-column label="姓名" width="100"></el-table-column>
            <el-table-column label="组织" width="200"></el-table-column>
            <el-table-column label="性别" width="100"></el-table-column>
            <el-table-column label="参会状态" width="150"></el-table-column>
            <el-table-column label="请假原因"></el-table-column>
          </el-table>
			<pagination
			v-show="detailquery.total>0"
			:total="detailquery.total"
			:page.sync="detailquery.pageNum"
			:limit.sync="detailquery.pageSize"
			@pagination="()=>{}"
			/>
        </el-tab-pane>
				<el-tab-pane label="签到信息" name="签到信息"
					>
          <el-tag>
            <i class="el-icon-info" style="margin-right: 5px;color:#1890ff;font-size:16px"></i>
            签到回执：应签到15人，已签到1人，未签到14人。
          </el-tag>
          <el-table>
            <el-table-column label="姓名" width="100"></el-table-column>
            <el-table-column label="组织" width="300"></el-table-column>
            <el-table-column label="性别" width="100"></el-table-column>
            <el-table-column label="签到状态" width="200"></el-table-column>
            <el-table-column label="签到时间"></el-table-column>
          </el-table>
			<pagination
				v-show="detailquery.total > 0"
				:total="detailquery.total"
				:page.sync="detailquery.pageNum"
				:limit.sync="detailquery.pageSize"
				@pagination="() => {}"
			/>
          </el-tab-pane>
			</el-tabs>
		</el-dialog>

    <el-dialog title="参会人员" :visible.sync="attendee">
    <div class="attendees">
      <div class="attendee" v-for="(item,index) in 50" :key="index" @click="note">
        <el-avatar src="www.baidu.com/img/bd_logo1.png"></el-avatar>
        <span style="margin-top:6px">姓名</span>
      </div>
    </div>
    </el-dialog>
    <el-dialog title="查看笔记" :visible.sync="notedialog">
    <div style="text-align: center;font-size:18px;"><b>会议标题</b></div>
    <div style="color:#999;line-height:2">参会人员 所属组织，参会时间</div>
    <div style="line-height:2">会议记录的内容</div>
    <div>图片：</div>
    </el-dialog>
	</div>
</template>

<script>
// import { } from "@/api/card/home";
export default {
	data() {
		return {
			loading: false,
			value1: '',
			detaildialog: false,
			list: [{}],
			ruleForm: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
				type: [],
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入活动名称',
						trigger: 'blur',
					},
				],
			},
			options: [],
			detailtab: '会议信息',
			detailquery: {
				pageNum: 1,
				pageSize: 10,
				total:20
			},
			attendee: false,
			notedialog: false,
		}
	},
	methods: {
		getList() {},
		submit() {
		},
		//切换分页
		handleCurrentChange(val) {
			this.loading = true
			this.ruleForm.pageNum = val
		},
		//切换总条数
		handleSizeChange(val) {
			this.loading = true
			this.ruleForm.pageSize = val
		},
		detail(row) {
			this.detaildialog = true
		},
		attendees(row) {
			this.attendee = true
		},
		note(item) {
			this.notedialog = true
		},
	},
	created() {
		this.getList()
	},
}
</script>

<style lang="scss" scoped>
.attendees {
	display: flex;
	flex-wrap: wrap;
	.attendee {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 10px;
		margin-bottom: 10px;
		cursor: pointer;
	}
}
</style>
